import { NavBar, DatePicker } from 'antd-mobile'
import { useEffect, useMemo, useState } from 'react'
import { useSelector } from 'react-redux'
import classNames from 'classnames'
import dayjs from 'dayjs'
import _ from 'lodash'

import './index.scss'
import DailyBill from './components/DailyBill'

const Month = () => {

    const [dateVisible, setDateVisible] = useState(false)
    const [date, setDate] = useState(new Date())
    const { billList } = useSelector(state => state.bill)
    const [currentMonthList, setCurrentMonthList] = useState([])

    const monthGroup = useMemo(() => {
        return _.groupBy(billList, (item) => dayjs(item.date).format('YYYY-MM'))
    }, [billList])

    const dayGroup = useMemo(() => {
        const dayGroupData = _.groupBy(currentMonthList, (item) => dayjs(item.date).format('YYYY-MM-DD'))
        const keys = Object.keys(dayGroupData)
        return { dayGroupData, keys }
    }, [currentMonthList])


    const { pay, income, total } = useMemo(() => {
        const pay = currentMonthList.filter(item => item.type === 'pay').reduce((a, c) => a + c.money, 0)
        const income = currentMonthList.filter(item => item.type === 'income').reduce((a, c) => a + c.money, 0)
        const total = pay + income
        return { pay, income, total }
    }, [currentMonthList])

    useEffect(() => {
        const dateFormed = dayjs(date).format('YYYY-MM')
        const currentList = monthGroup[dateFormed] || []
        setCurrentMonthList(currentList)
    }, [date, monthGroup])

    const confirmDate = (date) => {
        setDate(date)
        const dateFormed = dayjs(date).format('YYYY-MM')
        const currentList = monthGroup[dateFormed] || []
        setCurrentMonthList(currentList)
    }

    return (
        <div className="monthlyBill">
            <NavBar className="nav" backArrow={false}>
                月度收支
            </NavBar>
            <div className="content">
                <div className="header">
                    {/* 时间切换区域 */}
                    <div className="date" onClick={() => { setDateVisible(true) }}>
                        <span className="text">
                            {dayjs(date).format('YYYY | MM 月账单')}
                        </span>
                        <span className={classNames('arrow', { 'expand': dateVisible })} />
                    </div>
                    {/* 统计区域 */}
                    <div className='twoLineOverview'>
                        <div className="item">
                            <span className="money">{-pay.toFixed(2)}</span>
                            <span className="type">支出</span>
                        </div>
                        <div className="item">
                            <span className="money">{income.toFixed(2)}</span>
                            <span className="type">收入</span>
                        </div>
                        <div className="item">
                            <span className="money">{total.toFixed(2)}</span>
                            <span className="type">结余</span>
                        </div>
                    </div>
                    {/* 时间选择器 */}
                    <DatePicker
                        className="kaDate"
                        title="记账日期"
                        precision="month"
                        visible={dateVisible}
                        onCancel={() => { setDateVisible(false) }}
                        onConfirm={confirmDate}
                        onClose={() => { setDateVisible(false) }}
                        max={new Date()}
                    />
                </div>
                {
                    dayGroup.keys.sort((a, b) => new Date(b) - new Date(a)).map(item => {
                        return <DailyBill key={item} date={item} value={dayGroup.dayGroupData[item]} />
                    })
                }
            </div>
        </div >
    )
}

export default Month